<template>
  <div class='invitetender'  :style="{minHeight: height+'px'}">
    <el-container>
      <el-header class="invitetender-home-header">
        <div class="invitetender-home-search main-width">
          <el-input placeholder="请输入公告名称进行搜索" v-model="keywords" class="input-with-select" @keyup.enter.native="newSearch()">
            <el-button slot="append" class="width-100" @click="newSearch()">搜索</el-button>
          </el-input>
        </div>
      </el-header>
    </el-container>
    <el-container class="mb-5">
      <div class="" style="width: 890px;margin-right: 110px;">
        <!-- <div style="text-align: center; padding: 15px;" v-show="model.rows.length == = 0">暂无数据</div> -->
        <el-tabs  v-model="activeName" @tab-click="newSearch()"
        class="self-tab-style"  element-loading-text="拼命加载中">
          <el-tab-pane v-for="type in types" :key="type.type" :label="type.name" :name="type.type"></el-tab-pane>
        </el-tabs>
        <div style="text-align: center; padding: 15px;" v-show="model.rows.length === 0">暂无数据</div>
        <!-- 列表数据 -->
        <div v-for="(data, index) in model.rows" :key="index" @click="goShow(data)"
             class="d-flex justify-content-between align-items-center tender-sketch-info">
          <div>
            <p>{{data.tenderName}}</p>
            <p>
              <span>项目编号：{{data.tenderNumber}}</span> &nbsp;/&nbsp;
              <span>{{data.area}}</span>  
              <span v-if="data.tenderType === '1B04489AE16511E8B55FFA7DEC4CE400'">&nbsp;/&nbsp;&nbsp;距离开标时间：<span style="color: #94C05A">{{getStart(data.startTime)}}</span></span>
              <span v-if="data.tenderType === '1B0448F0E16511E8B55FFA7DEC4CE400'">&nbsp;/&nbsp;&nbsp;公示结束时间：<span style="color: #94C05A">{{$formatYMD(data.publicTime)}}</span></span>
            </p>
            <p>{{$formatYMD(data.ctime)}}</p>
          </div>
          <span class="badge badge-pill badge-info tender-mark" :class="[getType(data.tenderType).className]">{{getType(data.tenderType).name}}</span>
        </div>
        <el-button type="success fr width-200" style="margin: 20px 0;"
        plain round  @click="model.addLoad()" v-show="model.hasMore">查看更多</el-button>
      </div>
      <el-aside width="250px">
        <el-button type="primary" class="invitetender-btn" @click="$showImg('static/android.png')">地信圈APP下载</el-button>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import PagedList from '../../libs/PagedList'
export default {
  name: 'invitetenderslist',
  title: '招标列表',
  data() {
    return {
      model: new PagedList('/mscs/tender/findTenderAnnouncementByType', 8),
      types: [
        {name: '所有项目', type: '', className: ''},
        {name: '招标公告', type: '1B04489AE16511E8B55FFA7DEC4CE400', className: 'mark-primary'},
        {name: '变更公告', type: '1B044914E16511E8B55FFA7DEC4CE400', className: 'mark-caramel'},
        {name: '中标候选人公告', type: '1B0448F0E16511E8B55FFA7DEC4CE400', className: 'mark-blue'},
        {name: '中标公告', type: '1B044904E16511E8B55FFA7DEC4CE400', className: 'mark-green'},
        {name: '其他公告', type: '1B044937E16511E8B55FFA7DEC4CE400', className: 'mark-gray'}
      ],
      activeName: '',
      keywords: ''
    }
  },
  mounted () {
    this.newSearch()
  },
  methods: {
    newSearch() {
      this.model.search({search: this.keywords, type: this.activeName === "0" ? "" : this.activeName})
    },
    goShow (row) {
      const {href} = this.$router.resolve({
        name: 'invitetenderinfo',
        params: {id: this.$compileStr(row.tenderId), type: this.$compileStr(row.tenderType)}
      })
      window.open(href, '_blank')
    },
    getType (type) {
      let index = this.types.findIndex(item => {
        return item.type === type
      })
      return this.types[index]
    },
    getStart (time) {
      let diff = parseInt(time) - new Date().getTime() 
      if (diff > 1000 * 60 * 60 * 24) { // 大于一天
        return `${parseInt(diff / 1000 / 60 / 60 / 24)}天`
      } else if (diff > 1000 * 60 * 60) { // 大于一小时
        return `${parseInt(diff / 1000 / 60 / 60)}小时`
      } else if (diff > 0) { 
        return '小于1小时'
      } else {
        return '已开标'
      }
    }
  },
  computed: {
     height () {
       return this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
     }
   },
}
</script>
<style lang = 'scss'>
  .invitetender {
    padding-bottom: 50px; 
    .el-container {
      justify-content: center;
    }
    .invitetender-btn {
      width: 250px;
      font-size: 20px;
      padding: 16px;
    }
  }

  .invitetender-home-header {
    height: 100px!important;
    background-color: #edefea;
    margin-bottom: 50px;
    > .invitetender-home-search {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      .el-input-group {
        button {
          color: #FFFFFF;
          background-color: #94C05A;
          border-radius: 0;
        } 
      }
      > button {
        width: 150px;
        color: #FFFFFF;
        background-color: #94C05A;
        margin-left: 15px;
      }
    }
  }
  .tender-sketch-info {
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    &:hover {
      > div {
        > p:nth-child(1) {
          color: #94C05A;
        }
      }
    }
    > div {
      color: #333;
      > p:nth-child(1) {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 6px;
      }
      > p:nth-child(2) {
        font-size: 15px;
        margin-bottom: 6px;
      }
      > p:nth-child(3) {
        font-size: 12px;
        color: #999999;
        margin-bottom: 10px;
      }
    }
    .tender-mark {
      font-size: 14px;
      padding: 6px 10px;
    }
  }
  
</style>